        <div class="hide chat-wrap">
            <header class="chat-head"></header>
                <section class="chat-search large-12 column">
                    <form>
                        <div class="row collapse">
                            <div class="small-3 large-2 columns">
                              <span class="prefix"><i class="fa fa-search"></i></span>
                            </div>
                            <div class="small-9 large-10 columns">
                              <input type="text" placeholder="Search">
                            </div>
                        </div>
                    </form>
                </section>

                <section id="chat_container" class="chat-list">
                   <div id ="chatLoading"><center><img src="<?=BASE_URI?>img/loading.gif"/></center></div>
                </section>
        </div>
            <footer class="chat-footer">
                <strong><i class="fa fa-weixin" style="color:white;"></i> <a>Chat</a></strong>&nbsp;&nbsp;
                <small><span id="chat_online"></span></small>
            </footer>        
  
<script type="text/javascript">
    $( ".chat-footer" ).click(function() {
        var clickhide = $('.chat-wrap');

        if($('.chat-wrap').hasClass('hide')) {
            clickhide.removeClass('hide');
        }
        else {
            clickhide.addClass('hide');  
        }
    });
    $( ".chat-head" ).click(function() {
        var clickhide = $('.chat-wrap');
        
        if($('.chat-wrap').hasClass('hide')) {
            clickhide.removeClass('hide');
        }
        else {
            clickhide.addClass('hide');  
        }
    });
</script>

<style>
    @media only screen and (max-width : 540px) 
            {
                .chat-wrap
                {
                    display: none !important;
                }
                
                .chat-popup
                {
                    display: none !important;
                }
            }
            
            body
            {
                background-color: #e9eaed;
            }
            
            


        </style>

<script type="text/javascript" src="<?= BASE_URI ?>js/user_chat.js"> </script>